<template>
  <div class="main order-detail">
    <el-tabs v-model="currentTab" type="border-card">
      <el-tab-pane label="订单信息" name="orderInfo" v-loading="pageLoading">
        <ul class="form-list col-2">
          <li class="form-item">
            <span class="item-title">编号:</span>
            <p v-text="orderInfo.orderNo"></p>
          </li>
          <li class="form-item">
            <span class="item-title">状态:</span>
            <p v-text="states[orderInfo.status]"></p>
          </li>
          <li class="form-item">
            <span class="item-title">用户:</span>
            <p
              v-text="
                `${orderInfo.realName || ''} ${orderInfo.userMobile || ''}`
              "
            ></p>
          </li>
          <li class="form-item">
            <span class="item-title">收货人:</span>
            <p
              v-text="`${orderInfo.consignee || ''} ${orderInfo.mobile || ''}`"
            ></p>
          </li>
          <li class="form-item">
            <span class="item-title">收货地址:</span>
            <p
              v-text="
                `${orderInfo.country || ''} ${orderInfo.province ||
                  ''} ${orderInfo.city || ''} ${orderInfo.address || ''}`
              "
            ></p>
          </li>
          <li class="form-item">
            <span class="item-title">备注:</span>
            <p v-text="orderInfo.remark || '-'"></p>
          </li>
          <li class="form-item">
            <span class="item-title">下单时间:</span>
            <p
              v-text="formatDate(orderInfo.createdAt, 'YYYY-MM-DD HH:mm:ss')"
            ></p>
          </li>
          <li class="form-item">
            <span class="item-title">状态更新时间:</span>
            <p
              v-text="formatDate(orderInfo.updatedAt, 'YYYY-MM-DD HH:mm:ss')"
            ></p>
          </li>
          <li class="form-item">
            <span class="item-title">E3单号:</span>
            <p v-text="orderInfo.e3OrderNo || '-'"></p>
          </li>
          <li class="form-item">
            <span class="item-title">最后同步时间:</span>
            <p
              v-if="orderInfo.lastSyncTime"
              v-text="formatDate(orderInfo.lastSyncTime, 'YYYY-MM-DD HH:mm:ss')"
            ></p>
            <p v-else>-</p>
          </li>
          <li class="form-item">
            <span class="item-title">订单类别:</span>
            <p>{{ orderTypeName }}</p>
          </li>
          <li class="form-item">
            <span class="item-title">物流:</span>
            <p v-text="orderInfo.com || '-'"></p>
          </li>
          <li class="form-item">
            <span class="item-title">物流订单号:</span>
            <p v-text="orderInfo.expressNo || '-'"></p>
          </li>
          <li class="form-item" v-if="orderInfo.boxGiftStatus !== null">
            <span class="item-title">激活状态:</span>
            <p>{{ activeStatus[orderInfo.boxGiftStatus] }}</p>
          </li>
          <li class="form-item" style="padding-left: 115px;">
            <span class="item-title" style="width: auto;"
              >第三方订单流水号:</span
            >
            <p
              v-text="lastPayNotifyLogs ? lastPayNotifyLogs.thirdTradeNo : '-'"
            ></p>
          </li>
          <li class="form-item">
            <span class="item-title">支付渠道:</span>
            <p v-if="lastPayNotifyLogs && orderInfo.payChannel !== '9'">
              {{
                lastPayNotifyLogs.payChannel === 'UNIONPAY_APP'
                  ? '银联云闪付'
                  : lastPayNotifyLogs.payChannel === 'ALIPAY_APP'
                  ? '支付宝支付'
                  : '微信支付'
              }}
            </p>
            <p v-else-if="orderInfo.payChannel === '9'">积分支付</p>
            <p v-else>-</p>
          </li>
        </ul>
        <!-- 订单明细 -->
        <h4 class="title" v-if="boxOrderTypeFlag != 3">
          <div>订单明细</div>
          <div class="refund-money">订单已退款金额：{{ hadRefundMoney }}</div>
          <el-button
            v-if="isShowRefundBtn && refundAllBtnFlag"
            type="danger"
            size="mini"
            plain
            @click="showRefund('all')"
            >全部{{ refundBtnText }}</el-button
          >
          <el-button
            type="primary"
            size="mini"
            plain
            :loading="btnLoading"
            @click="refreshAmount"
            >刷新金额</el-button
          >
        </h4>
        <h4 class="title" v-if="boxOrderTypeFlag == 3">
          <div>订单明细</div>
        </h4>

        <!-- 单品 -->
        <template v-if="singleGoodsList.length">
          <el-table :data="singleGoodsList" border>
            <el-table-column align="center" label="图片" width="170">
              <template slot-scope="scope">
                <div class="img-box">
                  <img :src="scope.row.skuImage" alt="商品图片" />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称">
              <template slot-scope="scope">
                <span class="present-flag" v-if="scope.row.presentFlag == 1"
                  >赠品</span
                >
                {{ scope.row.goodsName }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品类型"
              v-if="showGoodsType"
            >
              <template slot-scope="scope" v-if="scope">单品</template>
            </el-table-column>
            <el-table-column align="center" label="供应商">
              <template slot-scope="scope">
                {{ scope.row.merchantName ? scope.row.merchantName : '自营' }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品规格"
              prop="goodsAttr"
            ></el-table-column>
            <el-table-column align="center" label="单价">
              <template slot-scope="scope">
                <span>{{ scope.row.price | money }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="下单数量"
              prop="goodsNumber"
            ></el-table-column>
            <el-table-column
              align="center"
              label="已退款数量"
              prop="refundGoodsNumber"
            ></el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                <span>{{
                  (Number(scope.row.price) * Number(scope.row.goodsNumber))
                    | money
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="120px"
              v-if="isShowRefundBtn && showGoodsType && boxOrderTypeFlag != 3"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.goodsNumber - scope.row.refundGoodsNumber"
                  type="danger"
                  size="mini"
                  @click="showRefund('single', scope.row)"
                  plain
                  >{{ refundBtnText }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!-- 套餐 -->
        <template v-if="packList.length">
          <el-table
            :data="packList"
            :show-header="!singleGoodsList.length"
            default-expand-all
            border
          >
            <el-table-column align="center" type="expand" width="50">
              <template slot-scope="$scope">
                <el-table
                  :data="$scope.row.packGoodsList"
                  style="width: 100%"
                  border
                >
                  <el-table-column align="center" label="图片" width="120">
                    <template slot-scope="scope">
                      <div class="img-box">
                        <img :src="scope.row.skuImage" alt="商品图片" />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="商品名称">
                    <template slot-scope="scope">
                      <span
                        class="present-flag"
                        v-if="scope.row.presentFlag == 1"
                        >赠品</span
                      >
                      {{ scope.row.goodsName }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="商品类型">
                    <template slot-scope="scope" v-if="scope">单品</template>
                  </el-table-column>
                  <el-table-column align="center" label="供应商">
                    <template slot-scope="scope">
                      {{
                        scope.row.merchantName ? scope.row.merchantName : '自营'
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="商品规格"
                    prop="goodsAttr"
                  ></el-table-column>
                  <el-table-column align="center" label="单价">
                    <template slot-scope="scope">
                      <span>{{ scope.row.price | money }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="下单数量"
                    prop="goodsNumber"
                  ></el-table-column>
                  <el-table-column
                    align="center"
                    label="已退款数量"
                    prop="refundGoodsNumber"
                  ></el-table-column>
                  <el-table-column align="center" label="总价">
                    <template slot-scope="scope">
                      <span>{{
                        (Number(scope.row.price) *
                          Number(scope.row.goodsNumber))
                          | money
                      }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column align="center" label="图片" width="120">
              <template slot-scope="scope">
                <div class="img-box">
                  <img :src="scope.row.packageImage" alt="商品图片" />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称">
              <template slot-scope="scope">
                <span class="present-flag" v-if="scope.row.presentFlag == 1"
                  >赠品</span
                >
                {{ scope.row.packageName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="商品类型">
              <template slot-scope="scope" v-if="scope">套餐</template>
            </el-table-column>
            <el-table-column align="center" label="供应商">
              <template slot-scope="scope" v-if="scope">
                -
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品规格"
              prop="goodsAttr"
            ></el-table-column>
            <el-table-column align="center" label="单价">
              <template slot-scope="scope">
                <span>{{ scope.row.price | money }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="下单数量"
              prop="packNum"
            ></el-table-column>
            <el-table-column
              align="center"
              label="已退款数量"
              prop="hadRefundNum"
            ></el-table-column>
            <el-table-column align="center" label="总价">
              <template slot-scope="scope">
                <span>{{ scope.row.priceTotal | money }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="120px"
              v-if="isShowRefundBtn && orderType != 11"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.packNum - scope.row.hadRefundNum"
                  type="danger"
                  size="mini"
                  @click="showRefund('package', scope.row)"
                  plain
                  >{{ refundBtnText }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!-- 箱起 -->
        <template v-if="boxList.length">
          <!-- 箱起礼包 -->
          <template v-if="orderInfo.activityId">
            <el-table :data="boxList" default-expand-all border>
              <el-table-column align="center" type="expand" width="50">
                <template slot-scope="$$scope">
                  <el-table
                    :data="$$scope.row.itemList"
                    default-expand-all
                    border
                  >
                    <el-table-column align="center" type="expand" width="50">
                      <template slot-scope="$scope">
                        <el-table
                          :data="$scope.row.itemList"
                          style="width: 100%"
                          border
                        >
                          <el-table-column
                            align="center"
                            label="图片"
                            width="120"
                          >
                            <template slot-scope="scope">
                              <div class="img-box">
                                <img :src="scope.row.skuImage" alt="商品图片" />
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="商品名称">
                            <template slot-scope="scope">
                              <span
                                class="present-flag"
                                v-if="scope.row.presentFlag == 1"
                                >赠品</span
                              >
                              {{ scope.row.goodsName }}
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="商品类型">
                            <template slot-scope="scope">
                              {{ scope.row.goodsType === 1 ? '单品' : '套餐' }}
                            </template>
                          </el-table-column>
                          <el-table-column align="center" label="供应商">
                            <template slot-scope="scope">
                              {{
                                scope.row.merchantName
                                  ? scope.row.merchantName
                                  : '自营'
                              }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            label="商品规格"
                            prop="goodsAttr"
                          ></el-table-column>
                          <el-table-column align="center" label="单价">
                            <template slot-scope="scope">
                              <span>{{ scope.row.payPrice | money }}</span>
                            </template>
                          </el-table-column>
                          <el-table-column
                            align="center"
                            label="下单数量"
                            prop="goodsNumber"
                          ></el-table-column>
                          <el-table-column
                            align="center"
                            label="已退款数量"
                            prop="refundGoodsNumber"
                          ></el-table-column>
                          <el-table-column align="center" label="总价">
                            <template slot-scope="scope">
                              <span>{{
                                (Number(scope.row.payPrice) *
                                  Number(scope.row.goodsNumber))
                                  | money
                              }}</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="图片" width="120">
                      <template slot-scope="scope">
                        <div class="img-box">
                          <img :src="scope.row.img" alt="商品图片" />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="活动系列名称"
                      prop="seriesName"
                    ></el-table-column>
                    <el-table-column
                      v-if="boxOrderTypeFlag != 3"
                      align="center"
                      label="活动渠道"
                      prop="seriesType"
                    >
                      <template slot-scope="scope">{{
                        seriesTypes[scope.row.seriesType]
                      }}</template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="单价"
                      prop="price"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="下单数量"
                      prop="quantity"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="已退款数量"
                      prop="refundQuantity"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="总价"
                      prop="totalPrice"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="操作"
                      width="120px"
                      v-if="
                        isShowRefundBtn &&
                          isShowRefundBtnBox &&
                          boxOrderTypeFlag != 3
                      "
                    >
                      <template slot-scope="scope">
                        <span v-if="markupOrderGoods.length"
                          >加购订单不可部分退款</span
                        >
                        <el-button
                          v-if="
                            scope.row.quantity - scope.row.refundQuantity &&
                              markupOrderGoods.length <= 0
                          "
                          type="danger"
                          size="mini"
                          @click="showRefund('box', scope.row)"
                          plain
                          >{{ refundBtnText }}</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 加购 -->
                  <el-table
                    v-if="markupOrderGoods.length"
                    :data="[$$scope.row.markupOrderGoods]"
                    border
                  >
                    <el-table-column align="center" width="50">
                      <template>
                        <div class="el-table__expand-icon ">
                          <i class="el-icon el-icon-arrow-right"></i>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="图片" width="120">
                      <template slot-scope="scope">
                        <div class="img-box">
                          <img :src="scope.row.skuImage" alt="商品图片" />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="加购商品名称"
                      prop="goodsName"
                    ></el-table-column>
                    <el-table-column align="center" label="活动渠道">
                      <template>礼包</template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="加购价"
                      prop="payPrice"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="加购数量"
                      prop="goodsNumber"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="已退款数量"
                      prop="refundGoodsNumber"
                    ></el-table-column>
                    <el-table-column align="center" label="总价">
                      <template slot-scope="scope">
                        <span>{{
                          Number(scope.row.payPrice) *
                            Number(scope.row.goodsNumber)
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="操作"
                      width="120px"
                      v-if="isShowRefundBtn && isShowRefundBtnBox"
                    >
                      <template>加购订单不可部分退款</template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图片" width="120">
                <template slot-scope="scope">
                  <div class="img-box">
                    <img :src="scope.row.img" alt="商品图片" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="箱起礼包名称"
                prop="seriesName"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="礼包类型"
                prop="giftType"
              >
                <template slot-scope="scope">{{
                  scope.row.giftType === 1
                    ? '可退'
                    : scope.row.giftType === 2
                    ? '云仓'
                    : '不可退'
                }}</template>
              </el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag == 3"
                align="center"
                label="1星以下，起售积分"
                prop="vipGivingPrice"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="起售金额"
                prop="price"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag == 3"
                align="center"
                label="1星以上，起售积分"
                prop="boxLevelGivingPrice"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="总价"
                prop="totalPrice"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag == 3"
                align="center"
                label="总积分"
                prop="payIntegral"
              >
                <template slot-scope="scope">
                  <div class="detail-score" @click="dialogVisibleScore = true">
                    {{ scope.row.payIntegral }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 箱起零售 -->
          <template v-else>
            <el-table :data="boxList" default-expand-all border>
              <el-table-column align="center" type="expand" width="50">
                <template slot-scope="$scope">
                  <el-table
                    :data="$scope.row.itemList"
                    style="width: 100%"
                    border
                  >
                    <el-table-column align="center" label="图片" width="120">
                      <template slot-scope="scope">
                        <div class="img-box">
                          <img :src="scope.row.skuImage" alt="商品图片" />
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="商品名称">
                      <template slot-scope="scope">
                        <span
                          class="present-flag"
                          v-if="scope.row.presentFlag == 1"
                          >赠品</span
                        >
                        {{ scope.row.goodsName }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="商品类型">
                      <template slot-scope="scope">{{
                        scope.row.goodsType === 1 ? '单品' : '套餐'
                      }}</template>
                    </el-table-column>
                    <el-table-column align="center" label="供应商">
                      <template slot-scope="scope">
                        {{
                          scope.row.merchantName
                            ? scope.row.merchantName
                            : '自营'
                        }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="商品规格"
                      prop="goodsAttr"
                    ></el-table-column>
                    <el-table-column align="center" label="单价">
                      <template slot-scope="scope">
                        <span>{{ scope.row.price | money }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="下单数量"
                      prop="goodsNumber"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      label="已退款数量"
                      prop="refundGoodsNumber"
                    ></el-table-column>
                    <el-table-column align="center" label="总价">
                      <template slot-scope="scope">
                        <span>{{
                          (Number(scope.row.price) *
                            Number(scope.row.goodsNumber))
                            | money
                        }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column align="center" label="图片" width="120">
                <template slot-scope="scope">
                  <div class="img-box">
                    <img :src="scope.row.img" alt="商品图片" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="活动系列名称"
                prop="seriesName"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="活动渠道"
                prop="seriesType"
              >
                <template slot-scope="scope">{{
                  seriesTypes[scope.row.seriesType]
                }}</template>
              </el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="单价"
                prop="price"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="下单数量"
                prop="quantity"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="已退款数量"
                prop="refundQuantity"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag != 3"
                align="center"
                label="总价"
                prop="totalPrice"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag == 3"
                align="center"
                label="1星以下，起售积分"
                prop="vipGivingPrice"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag == 3"
                align="center"
                label="1星以上，起售积分"
                prop="boxLevelGivingPrice"
              ></el-table-column>
              <el-table-column
                v-if="boxOrderTypeFlag == 3"
                align="center"
                label="总积分"
                prop="payIntegral"
              >
                <template slot-scope="scope">
                  <div class="detail-score" @click="dialogVisibleScore = true">
                    {{ scope.row.payIntegral }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>

        <!-- 订单金额明细 -->
        <el-table :data="orderPriceList" :show-header="false" border>
          <el-table-column
            align="center"
            label="名称"
            width="170"
            prop="name"
          ></el-table-column>
          <el-table-column align="right" label="金额">
            <template slot-scope="scope">
              <span v-if="boxOrderTypeFlag != 3"
                >￥{{ scope.row.money | money }}</span
              >
              <span v-if="boxOrderTypeFlag == 3">
              {{ scope.row.money | money }}
              <span v-if="scope.row.name == '加价商品金额'||scope.row.name == '现金实付'">元</span>
              <span v-else>积分</span>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 物流信息 -->
        <h4 class="title">物流信息</h4>
        <el-table :data="expressList" border>
          <el-table-column align="center" label="时间" width="200">
            <template slot-scope="scope">
              <span>{{
                formatDate(scope.row.time, 'YYYY-MM-DD HH:mm:ss')
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="信息"
            prop="context"
          ></el-table-column>
        </el-table>

        <!-- 预估收益 -->
        <div>
          <div v-if="boxOrderTypeFlag != 3">
            <h4 class="title">预估收益</h4>
            <el-table :data="orderCommissionList" border>
              <el-table-column
                align="center"
                label="姓名"
                prop="nickname"
              ></el-table-column>
              <el-table-column
                align="center"
                label="手机号"
                prop="mobile"
              ></el-table-column>
              <el-table-column
                align="center"
                label="提成人等级"
                prop="level"
              ></el-table-column>
              <el-table-column align="center" label="折扣比例">
                <template slot-scope="scope">
                  <!-- <span v-if="scope.row.recommType">{{
                    scope.row.recommType
                  }}</span>
                  <span v-else>Lv.{{ scope.row.percentageType }}</span> -->
                  {{scope.row.discountCommissionRate}}
                </template>
              </el-table-column>
              <el-table-column align="center" label="团队比例">
                <template slot-scope="scope">
                  <!-- <span>{{ (scope.row.commissionRate * 100).toFixed(2) }}</span>% -->
                  <span>{{ (scope.row.teamCommissionRate * 100).toFixed(2) }}</span>%
                </template>
              </el-table-column>
              <el-table-column align="center" label="佣金金额">
                <template slot-scope="scope">
                  <span>{{ scope.row.commissionPrice | money }}</span>
                  <el-button
                    type="text"
                    @click="viewCommissionDetail(scope.row)"
                    >查看明细</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column align="center" label="实际到账时间">
                <template slot-scope="scope">
                  <span>{{
                    formatDate(scope.row.arrivalTime, 'YYYY-MM-DD HH:mm:ss')
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 确认收益 -->
          <div v-if="boxOrderTypeFlag != 3">
            <h4 class="title">确认收益</h4>
            <el-table :data="confirmCommissionList" border>
              <el-table-column
                align="center"
                label="姓名"
                prop="nickname"
              ></el-table-column>
              <el-table-column
                align="center"
                label="手机号"
                prop="mobile"
              ></el-table-column>
              <el-table-column
                align="center"
                label="提成人等级"
                prop="level"
              ></el-table-column>
              <el-table-column align="center" label="提成类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.recommType">{{
                    scope.row.recommType
                  }}</span>
                  <span v-else>Lv.{{ scope.row.percentageType }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="佣金比例">
                <template slot-scope="scope">
                  <span>{{ (scope.row.commissionRate * 100).toFixed(2) }}</span
                  >%
                </template>
              </el-table-column>
              <el-table-column align="center" label="佣金金额">
                <template slot-scope="scope">
                  <span>{{ scope.row.commissionPrice | money }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="实际到账时间">
                <template slot-scope="scope">
                  <span>{{
                    formatDate(scope.row.arrivalTime, 'YYYY-MM-DD HH:mm:ss')
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 奖金收益 -->
          <div v-if="boxOrderTypeFlag == 3">
            <h4 class="title">奖金收益</h4>
            <el-table :data="rewareCommissionList" border>
              <el-table-column
                align="center"
                label="姓名"
                prop="nickName"
              ></el-table-column>
              <el-table-column
                align="center"
                label="手机号"
                prop="mobileNo"
              ></el-table-column>
              <el-table-column align="center" label="提成人等级" prop="level">
                <template slot-scope="scope">
                  <span v-text="levels[scope.row.level]"></span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="提成类别">
                <template slot-scope="scope">
                  <span v-if="scope.row.commissionType === 1">自购返佣</span>
                  <span v-if="scope.row.commissionType === 2">推荐佣金</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="佣金比例">
                <template slot-scope="scope">
                  <span>{{ scope.row.commissionRate }}</span
                  >%
                </template>
              </el-table-column>
              <el-table-column align="center" label="佣金金额">
                <template slot-scope="scope">
                  <span>{{ scope.row.commissionPrice | money }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="实际到账时间">
                <template slot-scope="scope">
                  <span>{{
                    formatDate(scope.row.settlementTime, 'YYYY-MM-DD HH:mm:ss')
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="操作记录" name="operateInfo" v-loading="pageLoading">
        <el-table :data="operateList" border v-loading="pageLoading">
          <el-table-column align="center" label="原状态" width="100">
            <template slot-scope="scope">
              <span v-text="states[scope.row.oldStatus]"></span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="新状态" width="100">
            <template slot-scope="scope">
              <span v-text="states[scope.row.newStatus]"></span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="说明"
            prop="remarks"
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作人"
            prop="nickname"
            width="200"
          ></el-table-column>
          <el-table-column align="center" label="时间" width="100">
            <template slot-scope="scope">
              <span>{{
                formatDate(scope.row.updatedAt, 'YYYY-MM-DD HH:mm:ss')
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="退款记录" name="refundInfo" v-loading="pageLoading">
        <el-table :data="refundList" border v-loading="refundListLoading">
          <el-table-column
            align="center"
            label="退单号"
            prop="refundNo"
            width="200"
          ></el-table-column>
          <el-table-column
            align="center"
            label="订单号"
            prop="orderNo"
            width="210"
          ></el-table-column>
          <el-table-column
            align="center"
            label="说明"
            prop="params"
          ></el-table-column>
          <el-table-column
            align="center"
            label="结果"
            prop="refundResult"
          ></el-table-column>
          <el-table-column align="center" label="操作人" width="160">
            <template slot-scope="scope">
              {{ scope.row.name }} <br />
              {{ scope.row.mobile }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="时间" width="100">
            <template slot-scope="scope">
              <span>{{
                formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 底部按钮 -->
    <div class="btn-center">
      <el-button
        v-if="
          rightsButtons['stateModify'] &&
            (orderInfo.status == 1 ||
              orderInfo.status == 5 ||
              orderInfo.status == 7)
        "
        type="primary"
        plain
        @click="statusRepair"
        :loading="btnLoading"
        >订单状态修复</el-button
      >
      <el-button type="primary" plain @click="$router.back()">返回</el-button>
    </div>

    <!-- 退款弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form :model="formData" size="medium" ref="form" label-width="120px">
        <el-form-item label="订单编号:" prop="orderSn">
          {{ formData.orderNo }}
        </el-form-item>
        <template v-if="tempRefundObj.id">
          <el-form-item label="名称:" prop="name">
            {{ tempRefundObj.name }}
          </el-form-item>
          <el-form-item label="退款数量:" prop="num">
            <el-input-number
              v-model="tempRefundObj.num"
              @change="getFreight"
              :min="tempRefundObj.minNumber"
              :max="tempRefundObj.maxNumber"
              label="退款数量"
            ></el-input-number>
            （可退数量{{ tempRefundObj.maxNumber }}件）
          </el-form-item>
        </template>
        <el-form-item label="是否退运费:" prop="refundFreightFlag">
          <el-radio
            v-model="formData.refundFreightFlag"
            :label="0"
            @change="countRefundMoney"
            >否</el-radio
          >
          <el-radio
            v-model="formData.refundFreightFlag"
            :label="1"
            @change="countRefundMoney"
            >是</el-radio
          >
        </el-form-item>
        <el-form-item
          label="是否自动补库存:"
          prop="autoOperateStock"
          v-if="stockShow"
        >
          <el-radio
            v-model="formData.autoOperateStock"
            :label="false"
            @change="countRefundMoney"
            >否</el-radio
          >
          <el-radio
            v-model="formData.autoOperateStock"
            :label="true"
            @change="countRefundMoney"
            >是</el-radio
          >
        </el-form-item>
        <el-form-item label="退款中包含运费:" prop="refundFreight">
          ¥{{ formData.refundFreightFlag === 1 ? formData.refundFreight : 0 }}
        </el-form-item>
        <el-form-item label="退款金额:" prop="refundMoney">
          <el-input-number
            v-model="formData.refundMoney"
            placeholder="退款金额"
            :precision="2"
            :step="0.01"
            :max="formData.refundMaxMoney"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注:" prop="refundMoney">
          <span class="spanText"
            >确认退款后,<span class="fontColor">“订单已退款金额”</span
            >的金额无变化，请您稍后进入订单详情“查看” 或点击“刷新金额”<span
              class="fontColor"
              >查看最新订单已退款金额</span
            ></span
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="ackRefund"
          :disabled="btnDisabled"
          :loading="btnDisabled"
          >确定退款</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 订单佣金明细弹窗 -->
    <el-dialog title="订单佣金明细" :visible.sync="dialogVisibleCommission">
      <el-table :data="commissionDetailList" border>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImg" width="80" height="80" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="商品名称"
          prop="goodsName"
        ></el-table-column>
        <el-table-column align="center" label="下单数量">
          <template slot-scope="scope">
            {{ scope.row.goodsNumber
            }}<span
              v-if="scope.row.refundNumber != 0"
              style="color:red;paddng-left: 6px;"
            >
              (-{{ scope.row.refundNumber }})</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="预估收益">
          <template slot-scope="scope">
            {{ scope.row.commissionPrice
            }}<span
              v-if="scope.row.refundPrice != 0"
              style="color:red;paddng-left: 6px;"
            >
              ({{ scope.row.refundPrice }})</span
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 积分明细 -->
    <el-dialog title="积分明细" width="50%" :visible.sync="dialogVisibleScore">
      <div class="dialog-score">
        <template v-for="(item, index) in scoreList">
          <div :key="index" class="item">
            <div class="fx-b">
              <div>{{ item.integralDesc }}</div>
              <div>{{ item.integral }}</div>
            </div>
            <div class="fx-b">
              <div>{{ formatDate(item.createdAt, 'YYYY-MM-DD HH:mm:ss') }}</div>
              <div>剩余: {{ item.balanceIntegral }}</div>
            </div>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleScore = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import sha1 from 'js-sha1'
export default {
  name: 'orderDetail',
  data() {
    return {
      levels: {
        '0': '0星',
        '1': '新晋董事',
        '2': '一星董事',
        '3': '二星董事',
        '4': '三星董事',
        '5': '四星董事'
      },
      states: {
        // 订单状态
        '1': '待付款',
        '2': '待发货',
        '3': '待收货',
        '4': '已收货',
        '5': '已取消',
        '6': '付款异常',
        '7': '超时取消',
        '8': '已退款',
        '10': '待发货',
        '11': '待成团'
      },
      types: {
        // 订单类别
        '1': '普通',
        '2': '会员礼包',
        '3': '会员组合礼包',
        '4': '大区礼包',
        '9': '城市合伙人',
        // '11': '箱起',
        '13': '新人礼包',
        '14': '门店大区礼包',
        '15': '保证金礼包',
        '18': '红石榴箱起',
        '19': '3亿红包',
        '22': '38元礼包',
        '24': '满减',
        '25': '拼团订单',
        '101': '会员专享订单',
        '151': '签到打卡赠品面膜',
        '152': '签到券订单',
        '153': '签到赠品订单',
        '202': '站外16元面膜',
        '211': '网红面膜赠品',
        '251': '网红面膜箱起',
        '1001': 'M件N元',
        '1101': '箱起礼包',
        '1102': '箱起零售',
        '260': '29.9元礼包',
        '1103': '箱起云仓单',
        '1104': '箱起提货单',
        '1105': '箱起特权包',
        '301': '红药房-普通商品',
        '302': '红药房-团购商品',
        '303': '红药房-店员商品',
        '304': '红药房-店长商品',
        '305': '红药房-县代商品',
        '306': '红药房-市代商品',
        '30': '免费领',
        '31': '低价购',
      },
      activeStatus: {
        '0': '待激活', // 箱起激活状态
        '1': '已激活',
        '2': '已注销'
      },
      seriesTypes: ['零售', '礼包', '零售+礼包', '云仓'], // 箱起类型
      pageLoading: true, // 页面加载状态
      currentTab: 'orderInfo', // 当前tab
      orderId: '', // 订单ID
      orderType: '', // 订单类型
      orderInfo: {}, // 订单基本信息
      showGoodsType: true, // 是否显示商品类型
      singleGoodsList: [], // 订单商品[单品]信息
      packList: [], // 订单套餐信息
      boxList: [], // 订单箱起信息
      markupOrderGoods: [], //加购信息
      orderPriceList: [], // 订单金额信息
      orderCommissionList: [], // 预估收益信息
      confirmCommissionList: [], // 确认收益信息
      rewareCommissionList: [], // 奖金收益信息
      operateList: [], // 订单操作记录
      refundListLoading: false, // 获取订单退款记录加载状态
      refundList: [], // 订单退款记录
      hadRefundMoney: 0, // 订单已退金额
      refundLost: 0, // 订单已退,却实际未退运费
      refundAllBtnFlag: false,
      expressList: [], // 物流信息

      commissionDetailList: [], // 佣金明细
      dialogVisibleCommission: false, // 佣金明细弹窗是否显示

      btnLoading: false, // [修复订单状态]按钮加载态
      dialogTitle: '', // 弹窗标题
      dialogVisible: false, // 是否显示退款弹窗
      dialogVisibleScore: false, // 是否显示积分明细弹窗
      btnDisabled: false, // 确定退款按钮状态
      refundType: '', // 退款商品类型：单品、套餐、箱起
      formData: {
        // 退款数据
        orderNo: '', // 订单号
        refundNo: '', // 退单号
        refundGoodsList: [], // 退款商品列表
        refundFreightFlag: 0, // 是否退运费 0否、1是
        autoOperateStock: false,
        refundFreight: '', // 退运费金额
        refundMoney: '', // 退款金额
        payName: '', // 支付方式
        user: {
          mobile: this.$store.getters.user.username,
          name: this.$store.getters.user.realname
        }
      },
      tempRefundObj: {
        // 要退款的单个整体数据
        id: '',
        name: '',
        num: 1,
        price: 0,
        minNumber: 1,
        maxNumber: 1
      },
      lastPayNotifyLogs: {},
      stockShow: false,
      boxOrderTypeFlag: -1,
      boxTypeFlag: 0,
      scoreList: [] // 积分明细列表
    }
  },
  computed: {
    // 订单类别名称
    orderTypeName: function() {
      let name = ''
      if (this.orderInfo.type === 11) {
        if (this.orderInfo.activityId && !this.orderInfo.boxOrderType) {
          name = this.types['1101']
        } else if (this.orderInfo.boxOrderType === 1) {
          name = this.types['1103']
        } else if (this.orderInfo.boxOrderType === 2) {
          name = this.types['1104']
        } else if (this.orderInfo.boxOrderType === 3) {
          name = this.types['1105']
        } else {
          name = this.types['1102']
        }
      } else {
        name = this.types[this.orderInfo.type]
      }
      return name
    },
    // 退款按钮名称
    refundBtnText: function() {
      return '退款'
    },
    // 是否显示退款按钮
    isShowRefundBtn: function() {
      // 待付款、已取消、超时取消、已退款 状态下不显示退款按钮
      if ([1, 5, 7, 8].includes(this.orderInfo.status)) {
        return false
      }
      // 退款权限
      if (
        this.rightsButtons &&
        this.rightsButtons['boxRefund'] &&
        (this.orderInfo.type === 11 || this.orderInfo.type === 9)
      ) {
        return true
      }
      if (
        this.rightsButtons &&
        this.rightsButtons['notBoxRefund'] &&
        this.orderInfo.type !== 11 &&
        this.orderInfo.type !== 9
      ) {
        return true
      }
      return false
    },
    // 箱起礼包是否显示单个退款按钮
    isShowRefundBtnBox: function() {
      // 箱起礼包 giftType === 0 为不可退礼包, 不显示单个退款按钮
      if (
        this.orderInfo.activityId &&
        this.boxList.length &&
        this.boxList[0].giftType === 0
      ) {
        return false
      }
      return true
    }
  },
  created() {
    this.orderId = this.$route.query.id
    this.orderType = Number(this.$route.query.type)
    this.fetchData()
    this.fetchOrderCommissionData()
    this.fetchConfirmCommissionData()
  },
  methods: {
    // 获取详情
    fetchData() {
      this.pageLoading = true
      this.request({
        url: `/bsnl-order/order/${this.orderId}/load`,
        method: 'get',
        params: {
          id: this.orderId
        }
      })
        .then(({ data }) => {
          this.pageLoading = false
          const {
            orderInfo,
            orderGoods,
            singleGoodsList,
            packList,
            boxInfo,
            orderGoodsMoney,
            orderExpress,
            orderLogs,
            lastPayNotifyLogs,
            boxIntegralDetails
          } = data
          // 获得积分明细
          this.scoreList = boxIntegralDetails || []
          this.orderInfo = orderInfo
          this.boxOrderTypeFlag = orderInfo.boxOrderType
          this.boxTypeFlag = orderInfo.boxOrderType
          if (orderInfo.type === 11 && orderInfo.boxOrderType === 2) {
            this.stockShow = true
          } else {
            this.stockShow = false
          }
          this.lastPayNotifyLogs = lastPayNotifyLogs
          this.singleGoodsList = singleGoodsList || []
          if (!(singleGoodsList || packList || boxInfo)) {
            this.showGoodsType = false
            this.singleGoodsList = orderGoods
          }
          this.packList = packList || []
          this.boxList = boxInfo ? [boxInfo] : []
          this.markupOrderGoods =
            boxInfo && boxInfo.markupOrderGoods
              ? [boxInfo.markupOrderGoods]
              : []
          this.operateList = orderLogs || []
          this.orderPriceList = [
            {
              name: '商品总金额',
              money: orderInfo ? orderInfo.goodsAmount || 0 : 0
            },
            {
              name: '等级减免金额',
              money: orderInfo ? orderInfo.saveByMemberPrice || 0 : 0
            },
            {
              name: '优惠券减免金额',
              money: orderInfo ? orderInfo.couponPrice || 0 : 0
            },
            {
              name: '红包减免金额',
              money: orderInfo ? orderInfo.saveByHongbaoPrice || 0 : 0
            },
            {
              name: '活动立减金额',
              money: orderInfo ? orderInfo.discountPromotion || 0 : 0
            },
            { name: '邮费', money: orderInfo ? orderInfo.postage || 0 : 0 },
            {
              name: '订单金额',
              money: orderGoodsMoney ? orderGoodsMoney.realMoney || 0 : 0
            },
            {
              name: '可用余额付款金额',
              money: orderInfo ? orderInfo.availableBalancePayAmt || 0 : 0
            },
            {
              name: '渠道付款金额',
              money: orderInfo ? orderInfo.channelPayAmt || 0 : 0
            },
          ]
          //箱起特权包订单金额列表逻辑
          if (this.orderInfo.boxOrderType == 3) {
            this.orderPriceList.splice(0, 1, {
                name: '箱起商品金额',
                money: orderInfo ? orderInfo.boxGoodsFee || 0 : 0
              },
              {
                name: '加价商品金额',
                money: orderInfo ? orderInfo.markUpGoodsFee || 0 : 0
              })
              this.orderPriceList.splice(this.orderPriceList.length-1, 1, {
                name: '积分实付',
                money: orderInfo ? orderInfo.payIntegral || 0 : 0
              },
              {
                name: '现金实付',
                money: orderInfo ? orderInfo.realPayPrice || 0 : 0
              })
          }
          // 物流信息
          if (
            orderExpress &&
            orderExpress.length &&
            orderExpress[0].expressInfo
          ) {
            this.expressList = JSON.parse(orderExpress[0].expressInfo).data
          }

          // 是否显示全部退款按钮
          orderGoods.map(item => {
            if (item.goodsNumber - item.refundGoodsNumber) {
              this.refundAllBtnFlag = true
            }
          })
          if (orderInfo && orderInfo.orderNo) {
            this.getRefundInfo(orderInfo.orderNo)
            this.getRefundMoney(orderInfo.orderNo)
            this.fetchRewareCommissionList(orderInfo.orderNo)
          }
        })
        .catch(e => {
          this.pageLoading = false
        })
    },
    // 获取已退款总金额
    getRefundMoney(orderNo) {
      this.btnLoading = true
      this.request({
        url: `/bsnl-order/order/had/refund/money?orderNo=${orderNo}`,
        method: 'get'
      })
        .then(({ data }) => {
          this.btnLoading = false
          this.hadRefundMoney = data
        })
        .catch(err => {
          console.log(err)
          this.hadRefundMoney = 0
        })
    },
    // 佣金接口生成sign
    getCommissionSign() {
      var stamp = new Date().getTime() // 时间戳
      var nonce = Math.floor(Math.random() * 999999) // 随机6位数
      var sign = sha1(`ojojioji:;;?@#-=UFJHFUfehu!SNJHUFp[][d${stamp}${nonce}`)
      return {
        stamp,
        nonce,
        sign
      }
    },
    // 获取预估收益信息
    fetchOrderCommissionData() {
      this.request({
        url:
          '/api/commission/v1/open/Order/getOrderCommissionGroupByUserIdList',
        method: 'post',
        headers: this.getCommissionSign(),
        data: {
          orderType: this.orderType,
          orderId: this.orderId
        }
      })
        .then(res => {
          this.orderCommissionList = res.data
        })
        .catch(e => {
          this.orderCommissionList = []
        })
    },
    // 查看预估受益详情
    viewCommissionDetail(row) {
      this.request({
        url: `/api/commission/v1/open/Order/getCommissionGroupByGoodsId`,
        method: 'post',
        headers: this.getCommissionSign(),
        data: {
          orderType: this.orderType,
          orderId: this.orderId,
          commissionUserId: row.userId
        }
      })
        .then(res => {
          if (res.code) {
            this.commissionDetailList = res.data
            this.dialogVisibleCommission = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取确认收益信息
    fetchConfirmCommissionData() {
      this.request({
        url:
          '/api/commission/v1/open/Order/getOrderCommissionGroupByUserIdList',
        method: 'post',
        headers: this.getCommissionSign(),
        data: {
          orderType: this.orderType,
          orderId: this.orderId,
          ectype: false
        }
      })
        .then(res => {
          this.confirmCommissionList = res.data || []
        })
        .catch(e => {
          this.confirmCommissionList = []
        })
    },
    // 获取奖金收益
    fetchRewareCommissionList(orderNo) {
      if (this.boxOrderTypeFlag == 3) {
        this.request({
          url: `/manager/commission/v1/open/bx/box-privilege-order-commission-info/list`,
          method: 'get',
          headers: this.getCommissionSign(),
          params: { pageSize: 100, orderNo: orderNo }
        })
          .then(res => {
            this.rewareCommissionList = res.data.list
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    // 获取退款记录
    getRefundInfo(orderNo) {
      this.refundListLoading = true
      this.request({
        url: `/bsnl-order/order/refund/list?orderNo=${orderNo}`,
        method: 'get'
      })
        .then(({ data }) => {
          this.refundListLoading = false
          this.refundList = data
        })
        .catch(err => {
          console.log(err)
          this.refundListLoading = false
          this.refundList = []
        })
    },
    // 订单状态修复
    statusRepair() {
      this.btnLoading = true
      this.request({
        url: `/bsnl-order/order/status/revert`,
        method: 'post',
        data: {
          userName: this.$store.getters.user.username,
          mobile: '',
          orderNo: this.orderInfo.orderNo
        }
      })
        .then(() => {
          this.$message.success('订单状态修复成功')
          this.fetchData()
          this.btnLoading = false
        })
        .catch(err => {
          console.log(err)
          this.btnLoading = false
        })
    },
    // 显示退款操作弹窗
    showRefund(type, row) {
      // 箱起礼包 giftType === 1 为可退礼包
      if (
        this.orderInfo.activityId &&
        this.boxList.length &&
        this.boxList[0].giftType === 1
      ) {
        // 但状态为待激活、已激活时
        if (
          this.orderInfo.boxGiftStatus === 0 ||
          this.orderInfo.boxGiftStatus === 1
        ) {
          this.$message({
            message: '非已注销箱起计划100天礼包订单不能退款',
            type: 'error'
          })
          return false
        }
      }
      this.refundType = type
      this.dialogTitle = type === 'all' ? '全部退款' : '退款'

      this.tempRefundObj = {
        // 要退款的单个整体数据
        id: '',
        name: '',
        num: 1,
        price: 0,
        minNumber: 1,
        maxNumber: 1
      }
      this.formData.refundFreightFlag = 0
      switch (type) {
        case 'all': // 全部退款
          /* this.singleGoodsList.map(i => {
            if(i.goodsNumber - i.refundGoodsNumber){
              refundGoodsList.push({
                orderGoodsId: i.id,
                goodsNumber: i.goodsNumber - i.refundGoodsNumber
              })
            }
          })
          this.packList.map(item => {
            item.packGoodsList.map(i => {
              if(i.goodsNumber - i.refundGoodsNumber){
                refundGoodsList.push({
                  orderGoodsId: i.id,
                  goodsNumber: i.goodsNumber - i.refundGoodsNumber
                })
              }
            })
          }) */
          this.formData.refundGoodsList = []
          this.getRestFreight()
          break
        case 'single':
          this.tempRefundObj = {
            id: row.id,
            name: row.goodsName + '【' + row.goodsAttr + '】',
            num: 1,
            price: row.price,
            payPrice: row.payPrice,
            minNumber: 1,
            maxNumber: Number(row.goodsNumber) - Number(row.refundGoodsNumber)
          }
          this.formData.refundGoodsList = [
            {
              orderGoodsId: row.id,
              goodsNumber: 1
            }
          ]
          this.getFreight()
          break
        case 'package':
          this.tempRefundObj = {
            id: row.packageId,
            name: row.packageName,
            num: 1,
            price: row.price,
            payPrice: row.packagePayPrice,
            minNumber: 1,
            maxNumber: Number(row.packNum) - Number(row.hadRefundNum)
          }
          this.formData.refundGoodsList = row.packGoodsList.map(i => {
            return {
              orderGoodsId: i.id,
              pGoodsNumber:
                (i.goodsNumber - i.refundGoodsNumber) /
                this.tempRefundObj.maxNumber,
              goodsNumber:
                (i.goodsNumber - i.refundGoodsNumber) /
                this.tempRefundObj.maxNumber
            }
          })
          this.getFreight()
          break
        case 'box':
          this.tempRefundObj = {
            id: row.boxId,
            name: row.seriesName,
            num: row.quantity,
            price: row.price,
            payPrice: row.payPrice,
            minNumber: row.quantity,
            maxNumber: row.quantity
          }
          this.formData.refundGoodsList = []
          var array1 = []
          var array2 = []
          row.itemList.map(i => {
            if (i.goodsType === 2) {
              i.orderGoodses.map(j => {
                array2.push({
                  orderGoodsId: j.id,
                  pGoodsNumber: row.quantity,
                  presentFlag: j.presentFlag,
                  goodsType: i.goodsType,
                  goodsNumber: j.goodsNumber
                })
              })
            } else {
              array1.push({
                orderGoodsId: i.id,
                pGoodsNumber: row.quantity,
                presentFlag: i.presentFlag,
                goodsType: i.goodsType,
                goodsNumber: i.goodsNumber
              })
            }
          })
          this.formData.refundGoodsList = this.formData.refundGoodsList.concat(
            array1
          )
          this.formData.refundGoodsList = this.formData.refundGoodsList.concat(
            array2
          )
          this.getFreight()
          break
        default:
          break
      }

      this.formData = {
        ...this.formData,
        orderNo: this.orderInfo.orderNo
      }
      this.dialogVisible = true
    },
    // 全部退款时，获取未退运费
    getRestFreight() {
      this.request({
        url: `/bsnl-goods-refund/order/goodsRefund/freightLeft`,
        method: 'get',
        params: { orderNo: this.orderInfo.orderNo }
      })
        .then(res => {
          if (res.data) {
            this.formData.refundFreight = res.data.notRefundSum || 0
            this.refundLost = res.data.refundLost || 0
          } else {
            this.formData.refundFreight = 0
          }
          this.countRefundMoney()
        })
        .catch(e => {
          console.log(e)
        })
    },
    // 获取要退运费
    getFreight() {
      let refundGoodsList = []
      let orderInfo = this.orderInfo
      if (this.refundType === 'single') {
        // 获取待退商品列表
        this.singleGoodsList.map(i => {
          let num = i.goodsNumber - i.refundGoodsNumber
          if (i.id === this.tempRefundObj.id) {
            num -= this.tempRefundObj.num
          }
          if (num > 0) {
            refundGoodsList.push({
              activityId: orderInfo.activityId,
              goodsId: i.goodsId,
              goodsSkuId: i.goodsSkuId,
              num
            })
          }
        })
        this.packList.map(i => {
          if (i.packNum - i.hadRefundNum) {
            let packageGoodsSkuIds = []
            packageGoodsSkuIds = i.packGoodsList
              .filter(j => j.presentFlag !== 1)
              .map(item => {
                return item.goodsSkuId
              })
            refundGoodsList.push({
              activityId: orderInfo.activityId,
              packageId: i.packageId,
              packageGoodsSkuIds,
              num: i.packNum - i.hadRefundNum
            })
          }
        })
      } else if (this.refundType === 'package') {
        // 获取待退商品列表
        this.singleGoodsList.map(i => {
          let num = i.goodsNumber - i.refundGoodsNumber
          if (num > 0) {
            refundGoodsList.push({
              activityId: orderInfo.activityId,
              goodsId: i.goodsId,
              goodsSkuId: i.goodsSkuId,
              num
            })
          }
        })
        this.packList.map(i => {
          let num = i.packNum - i.hadRefundNum
          if (i.packageId === this.tempRefundObj.id) {
            num -= this.tempRefundObj.num
          }
          if (num) {
            let packageGoodsSkuIds = []
            packageGoodsSkuIds = i.packGoodsList
              .filter(j => j.presentFlag !== 1)
              .map(item => {
                return item.goodsSkuId
              })
            refundGoodsList.push({
              activityId: orderInfo.activityId,
              packageId: i.packageId,
              packageGoodsSkuIds,
              num
            })
          }
        })
      } else if (this.refundType === 'box') {
        this.boxList.map(i => {
          i.itemList.map(item => {
            if (
              item.boxId !== this.tempRefundObj.id &&
              item.quantity - item.refundQuantity > 0
            ) {
              item.itemList
                .filter(j => j.presentFlag !== 1)
                .map(k => {
                  refundGoodsList.push({
                    activityId: orderInfo.activityId,
                    goodsId: k.typeId,
                    goodsSkuId: k.goodsSkuId,
                    num: item.quantity
                  })
                })
            }
          })
        })
      }

      this.request({
        url: `/bsnl-goods-refund/order/goodsRefund/freight`,
        method: 'post',
        data: {
          orderNo: orderInfo.orderNo,
          orderType: orderInfo.type,
          province: orderInfo.province,
          realPayMoney: orderInfo.realPayPrice,
          freightTotal: orderInfo.postage,
          refundGoodsList
        }
      })
        .then(res => {
          this.formData.refundFreight = res.data || 0
          this.countRefundMoney()
        })
        .catch(e => {
          console.log(e)
        })
    },
    // 计算退款金额
    countRefundMoney() {
      if (this.refundType === 'all') {
        let refundFreight = this.formData.refundFreightFlag
          ? 0
          : this.formData.refundFreight
        this.formData.refundMoney =
          this.orderInfo.realPayPrice -
          this.hadRefundMoney -
          refundFreight -
          this.refundLost
      } else {
        let refundFreight = this.formData.refundFreightFlag
          ? this.formData.refundFreight
          : 0
        if (this.refundType === 'single') {
          this.formData.refundGoodsList[0].goodsNumber = this.tempRefundObj.num
          this.formData.refundMoney =
            this.tempRefundObj.num * this.tempRefundObj.payPrice + refundFreight
        } else if (this.refundType === 'package') {
          this.formData.refundGoodsList.map(i => {
            i.goodsNumber = i.pGoodsNumber * this.tempRefundObj.num
          })
          this.formData.refundMoney =
            this.tempRefundObj.num * this.tempRefundObj.payPrice + refundFreight
        } else if (this.refundType === 'box') {
          this.formData.refundMoney =
            this.tempRefundObj.num * this.tempRefundObj.payPrice + refundFreight
        }
      }
      this.formData.refundMoney =
        Math.round(this.formData.refundMoney * 100) / 100
      this.formData.refundMaxMoney = this.formData.refundMoney
    },
    // 确定退款
    ackRefund() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        this.$confirm(
          '请先在e3进行相关操作，一旦点击确定就将款直接退到用户账号，请慎重！ 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.btnDisabled = true
            this.request({
              url: `/bsnl-goods-refund/order/${
                this.formData.refundGoodsList.length ? 'goods' : 'full'
              }/refund`,
              method: 'post',
              data: this.formData
            })
              .then(res => {
                if (res.code === 200) {
                  if (res.data && res.data.code === 550) {
                    this.$confirm(
                      '银联余额不足，退款失败，请稍后再试，或请联系银联工作人员进行退款处理',
                      '提示',
                      {
                        confirmButtonText: '确认退款',
                        cancelButtonText: '稍后再试',
                        type: 'warning'
                      }
                    )
                      .then(() => {
                        this.request({
                          url: `/bsnl-goods-refund/order/${
                            this.formData.refundGoodsList.length
                              ? 'goods'
                              : 'full'
                          }/refund`,
                          method: 'post',
                          data: {
                            ...this.formData,
                            operateTypeAfterRefundFail: 1
                          }
                        })
                          .then(response => {
                            if (response.code === 200) {
                              this.$message.success('退款成功')
                              this.dialogVisible = false
                              this.fetchData()
                            }
                          })
                          .catch(error => {
                            console.log(error)
                          })
                      })
                      .catch(e => {
                        this.dialogVisible = false
                      })
                  } else {
                    this.$message.success('退款成功')
                    this.dialogVisible = false
                    this.fetchData()
                  }
                }
                this.btnDisabled = false
              })
              .catch(err => {
                console.log(111)
                console.log(err)
                this.btnDisabled = false
              })
          })
          .catch(e => {
            this.$message({ type: 'info', message: '已取消操作' })
          })
      })
    },
    // 刷新金额
    refreshAmount() {
      let orderNo = this.formData.orderNo
        ? this.formData.orderNo
        : this.orderInfo.orderNo
      this.getRefundMoney(orderNo)
    }
  }
}
</script>
<style lang="scss">
@import '../../styles/mixin';
.order-detail {
  .el-table__expanded-cell {
    background: #f6f6f6 !important;
  }
  .present-flag {
    color: #fff;
    padding: 2px 4px;
    border-radius: 4px;
    background: #eda9b5;
  }
  .img-box {
    margin: 0 auto;
  }
  h4.title {
    @include flex;
    @include a-center;

    & > div:first-child {
      @include sub-item;
    }
    .refund-money {
      color: #c03639;
      font-size: 14px;
      margin-right: 12px;
    }
  }
  .spanText {
    color: #000000;
    .fontColor {
      color: #d9001b;
      margin: 0 2px;
    }
  }
}
.detail-score {
  cursor: pointer;
  color: blue;
}
.dialog-score {
  width: 70%;
  max-height: 50vh;
  overflow-y: auto;
  margin: 0 auto;
  padding: 10px;
  line-height: 1.5;
  .item {
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 10px;
    padding-bottom: 10px;
    .fx-b {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
